<template>
	<view style="width: 100%;">
		<view class="uni-common-mt">
			<form>
				<view class="uni-list list-pd">
					<view class="uni-list-cell cell-pd">
						<view class="uni-uploader">
							<view class="uni-uploader-head">
								<view class="uni-uploader-title">请拍摄故障现场图片</view>
								<view class="uni-uploader-info">{{imageList.length}}/3</view>
							</view>
							<view class="uni-uploader-body">
								<view class="uni-uploader__files">
									<block v-for="(image,index) in imageList" :key="index">
										<view class="uni-uploader__file">
											<image class="uni-uploader__img" :src="image" :data-src="image" @tap="previewImage"></image>
										</view>
									</block>
									<view class="uni-uploader__input-box">
										<view class="uni-uploader__input" @tap="chooseImage"></view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</form>
		</view>
		
	</view>
</template>
<script>
	
	import {
        mapMutations
    } from 'vuex'
	
	export default {
		data() {
			return {
				imageList: [],
				countIndex: 2,
				count: [1, 2, 3],
				savePath: [],
			}
		},
		watch:{
		},
		onUnload() {
			this.imageList = [],
			this.countIndex = 2;
		},
		onReady() {
		},
		methods: {
			...mapMutations(['putPhotos', 'clearPhotos']),
			countChange: function(e) {
				this.countIndex = e.target.value;
			},
			chooseImage: async function() {
					if (this.imageList.length === 3) {
						let isContinue = await this.isFullImg();
						console.log("是否继续?", isContinue);
						if (!isContinue) {
							return;
						}
					}
					uni.chooseImage({
						sourceType: ['camera'],
						sizeType: ['compressed', 'original'],
						count: this.imageList.length + this.count[this.countIndex] > 3 ? 3 - this.imageList.length : this.count[this.countIndex],
						success: (res) => {
							let that = this
							uni.saveFile({
							  tempFilePath: res.tempFilePaths[0],
							  success: function (saveRes) {
								if(saveRes && saveRes.errMsg.toString().indexOf('ok') != -1){
									that.imageList = that.imageList.concat(saveRes.savedFilePath);
									// 将图片上传至服务器
									uni.uploadFile({
										url: that.$api.baseUrl + '/kaxiu/imageUpload',
										filePath: saveRes.savedFilePath,
										name: 'file',
										success: (uploadFileRes) => {
											let result = JSON.parse(uploadFileRes.data)
											that.putPhotos(result.data)
										}
									});
								}
							  }
							});
						}
					})
				},
				isFullImg: function() {
					return new Promise((res) => {
						uni.showModal({
							content: "已经有3张图片了,是否清空现有图片？",
							success: (e) => {
								if (e.confirm) {
									this.imageList = [];
									this.clearPhotos()
									res(true);
								} else {
									res(false)
								}
							},
							fail: () => {
								res(false)
							}
						})
					})
				},
				previewImage: function(e) {
					var current = e.target.dataset.src
					uni.previewImage({
						current: current,
						urls: this.imageList
					})
				}
		}
	}
</script>

<style>
	.cell-pd {
		padding: 22upx 30upx;
	}

	.list-pd {
		margin-top: 0upx;
	}
</style>
